import React, { useState, useEffect, useRef } from 'react'; import { motion, AnimatePresence, useScroll, useTransform } from 'framer-motion'; import { Instagram, ChevronRight, Star, Clock, MapPin, Menu, X, Phone, Sparkles, Award, ArrowRight, ChevronLeft, ShieldCheck, CheckCircle2, ExternalLink } from 'lucide-react'; // Paleta de colores validada const COLORS = { gold: '#ceac6f', nude: '#dbc5a4', grey: '#a6aaab', light: '#f7f7f7', dark: '#1a1a1a' }; // Optimizador de Imágenes para Cloudflare Free (Usando parámetros de URL de Unsplash para reducir peso) const getOptimizedImg = (url, width = 800) => `${url}&w=${width}&q=75&auto=format`; const BeforeAfterSlider = () => { const [sliderPos, setSliderPos] = useState(50); const containerRef = useRef(null); const handleInteraction = (e) => { if (!containerRef.current) return; const rect = containerRef.current.getBoundingClientRect(); const x = (e.clientX || (e.touches && e.touches[0].clientX)) - rect.left; const pos = (x / rect.width) * 100; setSliderPos(Math.max(0, Math.min(100, pos))); }; return (
{/* Después */}
{/* Antes */}
{/* Control UI */}
); }; const App = () => { const [isMenuOpen, setIsMenuOpen] = useState(false); const [scrolled, setScrolled] = useState(false); const { scrollYProgress } = useScroll(); const yHero = useTransform(scrollYProgress, [0, 1], ["0%", "20%"]); useEffect(() => { const handleScroll = () => setScrolled(window.scrollY > 50); window.addEventListener('scroll', handleScroll, { passive: true }); return () => window.removeEventListener('scroll', handleScroll); }, []); return (
{/* Nav Optimizado: Evita Layout Shift al tener altura fija */} {/* Hero: Optimizado con Loading Eager */}
Micro-Artistry Background
Luxury Micro-Artistry

Realza tu
Poder Natural

{/* Secciones con min-h para evitar saltos de scroll */}
El proceso

El Arte de la
Precisión

{[ { t: "Visagismo de Autor", d: "Diseño matemático basado en tu estructura ósea única." }, { t: "Pigmentos Orgánicos", d: "Garantizamos tonos que no viran con el tiempo." }, { t: "Cuidado Post-Cita", d: "Seguimiento personalizado para resultados perfectos." } ].map((step, i) => (

{step.t}

{step.d}

))}
{/* Resultados */}

Resultados Reales

{/* CTA WhatsApp con Estilo */}
Agendar Ahora
); }; export default App;